import { Button, Image, Space } from 'antd'
import type { ProColumns } from '@ant-design/pro-components'
import type { UserItem, CreateUserParams } from '../../types/services'
import type { ProFormColumnsType } from '@ant-design/pro-components'
import { Input } from 'antd'
import PermissionButton from '../../components/PermissionButton'

const valueEnum = new Map([
  [1, { text: '启用' }],
  [0, { text: '禁用' }],
])

// 新增和编辑弹窗表单配置
export const createUserFormColumns: ProFormColumnsType<CreateUserParams>[] = [
  {
    title: '用户名',
    dataIndex: 'username',
    formItemProps: {
      rules: [
        {
          required: true,
          message: '请输入用户名',
        },
      ],
    },
    width: 'm',
  },
  {
    title: '密码',
    dataIndex: 'password',
    formItemProps: {
      rules: [
        {
          required: true,
          message: '请输入密码',
        },
      ],
    },
    renderFormItem: () => <Input.Password />,
    width: 'm',
  },
  {
    title: '状态',
    dataIndex: 'status',
    formItemProps: {
      rules: [
        {
          required: true,
          message: '请选择账号状态',
        },
      ],
    },
    valueType: 'select',
    valueEnum,
    width: 'm',
  },
]

// 用户列表 table 表头
interface ColumnsProps {
  onClickEdit: (row: UserItem) => void
  onClickRole: (row: UserItem) => void
  onClickDel: (row: UserItem) => void
}
export const getColumns = ({ onClickEdit, onClickDel, onClickRole }: ColumnsProps) => {
  const columns: ProColumns<UserItem>[] = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: '用户名',
      dataIndex: 'username',
      copyable: true,
      ellipsis: true
    },
    {
      title: '状态',
      dataIndex: 'status',
      valueType: 'select',
      valueEnum: {
        0: { text: '禁用', status: 'Error' },
        1: { text: '启用', status: 'Success'}
      }
    },
    {
      title: '头像',
      dataIndex: 'avator',
      hideInSearch: true,
      render: (_, record) => (
        <Image width={80} src={record.avator || 'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg'} />
      ),
    },
    {
      title: '最近登录时间',
      key: 'lastOnlineTime',
      dataIndex: 'lastOnlineTime',
      valueType: 'dateTime',
      hideInSearch: true,
      sorter: true
    },
    {
      title: '最近登录时间',
      dataIndex: 'lastOnlineTime',
      valueType: 'dateTimeRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          return {
            startTime: value[0],
            endTime: value[1],
          };
        },
      },
    },
    {
      title: '密码',
      hideInSearch: true,
      dataIndex: 'password'
    },
    {
      title: '创建人',
      dataIndex: 'creator'
    },
    {
      title: '操作',
      key: 'action',
      fixed: 'right',
      width: 280,
      hideInSearch: true,
      render: (text, record) => (
        <Space>
          <Button size="small" onClick={() => onClickRole(record)} type="primary">分配角色</Button>
          <Button size="small" onClick={() => onClickEdit(record)}>编辑</Button>
          {/* <Button size="small" danger onClick={() => onClickDel(record)}>删除</Button> */}
          <PermissionButton perKey="delUser" size="small" danger onClick={() => onClickDel(record)}>删除</PermissionButton>
        </Space>
      ),
    },
  ]
  return columns
}
